<template>
  <page-header-wrapper
    :tab-active-key="tabActiveKey"
    :tab-change="(key) => {
      this.tabActiveKey = key
    }"
    content="请在下方选择运动员名片"
  >
    <!-- <template v-slot:extraContent>
      <div style="width: 155px; margin-top: -20px;"><img style="width: 100%" :src="extraImage" /></div>
    </template> -->
    <a-list
      rowKey="id"
      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
      :dataSource="dataSource"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template >
          <a-card>
            <a-card-meta>
              <a slot="title">{{ item.title }}</a>
              <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
              <div class="meta-content" slot="description">{{ item.content }}</div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="goToList(item)">查看详情</a>
            </template>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
  </page-header-wrapper>
</template>

<script>

  const dataSource = []
  // dataSource.push({})
  for (let i = 0; i < 11; i++) {
    dataSource.push({
      id: i,
      title: '张亮',
      avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606396951086&di=a194d9bc2b7468dc16fe59053228e2cb&imgtype=0&src=http%3A%2F%2Fimg.fznews.com.cn%2Fcms%2F7e3b72334%2F20180823%2F15350222144460.jpg',
      content: '2007年获得阿姆斯特丹赛艇世界杯 男子单人艇 第八名；2010年 广州亚运会赛艇男子双人双桨冠军;2020年6月6日，在山东日照举行的陆上赛艇极限挑战赛上，张亮最终以2小时19分20秒8的成绩，创造了有滑轨陆上赛艇30-39岁年龄组男子马拉松新的世界纪录.'
    })
  }

  export default {
    name: 'TrainMembers',
    data () {
      return {
        tabActiveKey: 'tab1',
        extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
        dataSource
      }
    },
    methods: {
      testFun () {
        this.$message.info('快速开始被点击！')
      },
      goToList(item){
        this.$router.push({path:'/trainList',query: {nameId:item.id,name:item.title}})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~@/components/index.less";

  .card-list {
    /deep/ .ant-card-body:hover {
      .ant-card-meta-title>a {
        color: @primary-color;
      }
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 12px;

      &>a {
        display: inline-block;
        max-width: 100%;
        color: rgba(0,0,0,.85);
      }
    }

    /deep/ .meta-content {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      height: 64px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

      margin-bottom: 1em;
    }
  }

  .card-avatar {
    width: 66px;
    height: 66px;
    border-radius: 48px;
  }

  .ant-card-actions {
    background: #f7f9fa;

    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 100%;
        &:hover {
          color: @primary-color;
        }
      }
    }
  }

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }

</style>
